<template>
  <el-drawer v-model="visiable" title="更多条件" size="40%" class="drawer" :before-close="beforeClose">
    <article class="type-text">教师条件</article>
    <el-divider />
    <el-form :inline="true">
      <el-form-item label="教师姓名">
        <el-input v-model="pageQuery.otherParams.tchName" placeholder="输入教师姓名搜索" clearable />
      </el-form-item>
      <el-form-item label="教师工号">
        <el-input v-model="pageQuery.otherParams.workId" placeholder="输入教师工号搜索" clearable />
      </el-form-item>
    </el-form>
    <article class="type-text">课程条件</article>
    <el-divider />
    <el-form :inline="true">
      <el-form-item label="学年">
        <el-select v-model="pageQuery.otherParams.schoolYear" placeholder="选择学年搜索" clearable>
          <el-option v-for="item in schoolYearList" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="学期">
        <el-select v-model="pageQuery.otherParams.stage" placeholder="选择学期搜索" clearable>
          <el-option label="第一学期" :value="1" />
          <el-option label="第二学期" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="课程代码">
        <el-input v-model="pageQuery.otherParams.courseCode" placeholder="输入课程代码搜索" clearable />
      </el-form-item>
      <el-form-item label="教学班">
        <el-input v-model="pageQuery.otherParams.teachClass" placeholder="输入课程名称搜索" clearable />
      </el-form-item>
    </el-form>
    <article class="type-text">学生条件</article>
    <el-divider />
    <el-form :inline="true">
      <el-form-item label="学号">
        <el-input v-model="pageQuery.otherParams.studentId" placeholder="输入学生学号搜索" clearable />
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="pageQuery.otherParams.stuName" placeholder="输入学生姓名搜索" clearable />
      </el-form-item>
      <el-form-item label="学院">
        <el-input v-model="pageQuery.otherParams.college" placeholder="输入学生学院搜索" clearable />
      </el-form-item>
      <el-form-item label="专业">
        <el-input v-model="pageQuery.otherParams.major" placeholder="输入学生专业搜索" clearable />
      </el-form-item>
      <el-form-item label="班级">
        <el-input v-model="pageQuery.otherParams.stuClass" placeholder="输入学生班级搜索" clearable />
      </el-form-item>
    </el-form>
    <article class="type-text">分数条件</article>
    <el-divider />
    <el-form :inline="true">
      <el-form-item label="分数范围">
        <el-select v-model="scoreRange" placeholder="选择学期搜索" clearable>
          <el-option label="90分以上" value="90,100" />
          <el-option label="80 - 90分" value="80,89.99" />
          <el-option label="70 - 80分" value="70,79.99" />
          <el-option label="60 - 70分" value="60,69.99" />
          <el-option label="60分以下" value="0,59.99" />
        </el-select>
      </el-form-item>
    </el-form>
      <!-- 底部按钮 -->
      <template #footer>
        <div style="flex: auto">
          <el-button @click="onCancel">取消</el-button>
          <el-button type="primary" @click="onConfirm">搜索</el-button>
        </div>
      </template>
  </el-drawer>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from 'vue';
import { useUserStore } from '../../../store/user';
import { APIData, IScorePageParams } from '../../../type';
import { useAPI } from '../../../request/api';
import { useUtils } from '../../../utils/index';
import { ElMessage, ElMessageBox } from 'element-plus';

const api = useAPI();
const utils = useUtils();
const userStore = useUserStore();
const scoreRange = ref('');
const visiable = ref(false);
const schoolYearList = ref([] as { label: string; value: string }[]);
const pageQuery = reactive<IScorePageParams>({
  otherParams: {
    courseId: '',
    studentId: '',
    stuName: '',
    stuClass: '',
    major: '',
    college: '',
    grade: '',
    workId: '',
    score: '',
    courseCode: '',
    teachClass: '',
    tchName: '',
    scoreRange: [],
    schoolYear: '',
    stage: ''
  },
  pageParams: {
    pageNum: 1,
    pageSize: 10,
    sortField: '',
    sortType: '',
  },
});

const open = () => {
  schoolYearList.value = utils.getStuSchoolYear(Number(userStore.userInfo.grade));
  visiable.value = true;
}

watch(scoreRange,() => {
  pageQuery.otherParams.scoreRange = scoreRange.value.split(',').map((item: string) => Number(item))
})

const onCancel = () => {
  ElMessage.success('您取消了操作');
  visiable.value = false;
}

const reset = () => {
  visiable.value = false;
  scoreRange.value = '';
  pageQuery.otherParams = {
    courseId: '',
    studentId: '',
    stuName: '',
    stuClass: '',
    major: '',
    college: '',
    grade: '',
    workId: '',
    score: '',
    courseCode: '',
    teachClass: '',
    tchName: '',
    scoreRange: [],
    schoolYear: '',
    stage: ''
  }
}

const beforeClose = () => {
  ElMessageBox.confirm('关闭会清空数据，确定继续吗').then(() => {
    reset();
  }).catch(() => {
    // catch error
  })
}

const emit = defineEmits(['reload'])
const onConfirm = async () => {
  const res: APIData = await api.score.findPage(pageQuery);
  if (res.code === 200) {
    emit('reload', res.data);
    reset();
  }
  else ElMessage.error(res.message);
}

defineExpose({ open })
</script>

<style scoped lang="scss">
.el-divider {
  margin-top: 8px;
}

.el-form {
  margin-bottom: 16px;
}

.type-text {
  font-size: 16px;
  font-weight: bold;
  color: var(--font-color);
}

:deep(.el-input__wrapper) {
  width: 200px;
}
</style>